<template>
    <view class="wrapper">
		<BMap ref="mapRef"/>
        <!-- <BSseMessage @receiveMsg="handleReceiveMsg"/>  -->
        <view class="operation">
            <template v-if="orderDetail.orderStatus >= ORDER_STATUS.ARRIVED ">
                <view >
				 <text class="desc" v-if="orderDetail.orderStatus === ORDER_STATUS.ARRIVED">行程已完成，请等待司机收款</text>
				 <text class="desc" v-if="orderDetail.orderStatus >= ORDER_STATUS.WAIT_PAY">您的行程已结束，请您尽快完成支付</text>
						<hr />
                    <text class="desc"> 订单号: {{orderDetail.orderNo}}</text>
                    <text class="desc"> 出发地: {{orderDetail.originAddr}}</text>
                    <text class="desc"> 目的地: {{orderDetail.destAddr}}</text>
                    <text class="desc"> 时长: {{orderDetail.times}}/分钟</text>
                    <text class="desc"> 时长费: {{orderDetail.timeAmount}}/元</text>
                    <text class="desc"> 里程: {{orderDetail.miles}}/公里</text>
                    <text class="desc"> 里程费: {{orderDetail.mileAmount}}/元</text>
                    <text class="desc"> 追加费: {{orderDetail.tipAmount}}/元</text>
                    <text class="desc"> 优惠券: -{{orderDetail.couponAmount}}/元</text>
                    <text class="desc"> 其他费用: {{orderDetail.otherAmount}}/元</text>
					<hr />
                    <text class="desc" style="font-weight: bold;"> 合计: {{orderDetail.orderAmount}} /元</text>
                </view>
				<button @click="handlePay" v-if="orderDetail.orderStatus === ORDER_STATUS.WAIT_PAY" class="btn">￥{{orderDetail.orderAmount}}立即支付</button>
            </template>
            <template v-else>
              <view style="text-align: center;font-weight: bold;margin-bottom: 7px;" v-if="orderDetail.orderStatus === ORDER_STATUS.INIT">请等待附近司机接单...</view>
			  <view class="desc">
                    <text>订单号: {{orderDetail.orderNo}}</text>
                    <text style="color: darkred;font-weight: bold;" v-if="orderDetail.orderStatus === ORDER_STATUS.PROCESS">已接单</text>
                    <text style="color: darkred;font-weight: bold;" v-if="orderDetail.orderStatus === ORDER_STATUS.ARRIVE_AGREE_ADDR">到达上车点</text>
                    <text style="color: darkred;font-weight: bold;" v-if="orderDetail.orderStatus === ORDER_STATUS.ONCAR">正在为您服务</text>
                </view>
				  <view class="desc"> <text>出发地: {{orderDetail.originAddr}}</text> </view>
				  <view class="desc"> <text>目的地: {{orderDetail.destAddr}}</text></view>
				  <view  v-if="orderDetail.orderStatus >= ORDER_STATUS.PROCESS">	<hr /> </view>
				  <view class="desc" v-if="orderDetail.orderStatus >= ORDER_STATUS.PROCESS"> <text style="color: darkred;font-weight: bold;" >司机: {{orderDetail.driverName}}</text></view>
				  <view class="desc" v-if="orderDetail.orderStatus >= ORDER_STATUS.PROCESS"> <div style="color: darkred;font-weight: bold;" >手机号: <a style="text-decoration:underline;" href="tel:{{orderDetail.mobile}}" >{{orderDetail.mobile}}</a></div></view>
				  <view class="desc" v-if="orderDetail.orderStatus >= ORDER_STATUS.PROCESS"> <text style="color: darkred;font-weight: bold;" >车型: {{orderDetail.carInfo}}</text></view>
				  <view class="desc" v-if="orderDetail.orderStatus >= ORDER_STATUS.PROCESS"> <text style="color: darkred;font-weight: bold;" >车牌: {{orderDetail.carNum}}</text></view>
				  <view class="desc" v-if="orderDetail.orderStatus === ORDER_STATUS.ONCAR"> <text style="color: darkred;font-weight: bold;" >费用: {{orderDetail.orderAmount}}</text></view>
                <button @click="handleCancel"  v-if="orderDetail.orderStatus < ORDER_STATUS.ONCAR" class="btn btn_cancel">取消订单</button>
            </template>
        </view>
    </view>
</template>
<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { ApiGetCurrentOrder,GetOrderCalcInfo, ApiPostOrderCancel } from "../api/order"
import { HandleApiError,ShowToast } from "../utils";
import { ORDER_STATUS} from '../config/dicts';
//import BSseMessage from '../component/BSseMessage.vue';
import BMap from '../component/BMap.vue';
import { onMounted,ref ,onBeforeUnmount, reactive} from "vue";
import { useStore } from 'vuex';
let $routerQuery = {};
//let orderDetail = reactive({});
let orderDetail = ref({});
let mapRef = ref(null);
let timer = null;

onLoad((option)=>{
    $routerQuery = option;
});
onMounted(()=>{
  getOrderDetail();
})
onBeforeUnmount(()=>{
	if(timer){
		clearInterval(timer);
	}
	
})

const $store = useStore();

const calcTimer = () =>{
   timer = setInterval(()=>{
		getOrderCalc();
	}, 5000)
}

const  getOrderDetail = async () =>{
    const {error, result} = await ApiGetCurrentOrder();
    if(!result){
        uni.navigateTo({url:'/pages/index/index'})
    }else{
		orderDetail.value=result;
		//Object.assign(orderDetail, result)
		$store.commit('setOrderNo', result.orderNo);
        mapRef.value.driving([result.originLng, result.originLat], [result.destLng, result.destLat]);

		if(!timer){
			calcTimer();
		}
    }
}
/**
 * @Description: 取消订单
 * @return {*}
 */
const handleCancel = async () =>{
    const {error, result} = await ApiPostOrderCancel({orderNo: orderDetail.value.orderNo});
    if(!HandleApiError(error)){
		ShowToast('取消成功');
        uni.redirectTo({url:'/pages/index/index'});
    }
}
/**
 * @Description: 点击支付，跳转到支付网页；
 * @return {*}
 */
const handlePay = () =>{
    uni.navigateTo({
        url : `/pages/pay?orderNo=${orderDetail.value.orderNo}`
    })
}
/**
 * @Description: 接收订单变更消息
 * 暂时只有订单收款时会通知，使用价格判断
 * 比较完善的消息通知应该有消息分类，每个节点变化都通知
 * @param {*} msg
 * @return {*}
 */
const handleReceiveMsg = (msg) =>{
    //alert(msg)
	if(msg){
		 orderDetail = msg;
	
		if(!msg){
			alert("暂时无人接单，系统已自动取消订单");
			uni.navigateTo({url:'/pages/index/index'})
		}
    }
}	
const getOrderCalc =async () => {
	const { error, result } = await GetOrderCalcInfo({orderNo: $store.state.orderNo});
	if (result) {
			//Object.assign(orderDetail, result)
		orderDetail.value.orderAmount=result.orderAmount;
		orderDetail.value.timeAmount=result.timeAmount;
		orderDetail.value.otherAmount=result.otherAmount;
		orderDetail.value.times=result.times;
	
	   if(result.orderStatus===ORDER_STATUS.CANCELED){
		   clearInterval(timer);
		   alert("暂时无人接单，订单已取消");
		   uni.navigateTo({url:'/pages/index/index'})
	   }else{
		  if(result.orderStatus!=orderDetail.value.orderStatus){
			  orderDetail.value.orderStatus=result.orderStatus;
			  uni.navigateTo({url:'/pages/orderDetail'})
		  } 
	   }
	}
	
}
</script>
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    height: calc(100vh - 30px);
}

.operation{
    position: fixed;
    bottom: 30rpx;
    left: 30rpx;
    right: 30rpx;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-lg;
    z-index: 9;
    padding: $uni-spacing-max;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.desc{
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    font-size: $uni-font-size-base;
    color: $uni-text-color;

}
.btn{
    font-size: $uni-font-size-lg;
    margin-top: $uni-spacing-max;
    background: $uni-color-primary;
    color: $uni-text-color-inverse;
    &__cancel{
        background: $uni-bg-color-grey;
        color: $uni-text-color;
        border: 1px solid $uni-border-color;
    }

    &::after{
        display: none;
    }
}
</style>